<template>
  <el-dropdown :ref="dropData.ref" @command="handleCommand($event, dropData)">
    <el-button
      :plain="dropData.plain"
      :type="dropData.type"
      :size="dropData.size"
    >
      {{ dropData.label }}<i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        :key="key"
        v-for="(item, key) in dropData.dropArr"
        :command="item.key"
        :class="{
          activeCommand: activeCommand === item.key && dropData.isSelect,
        }"
      >
        <span class="p-r">{{ item.name }}</span>
        <i
          class="el-icon-check"
          v-show="activeCommand === item.key && dropData.isSelect"
        ></i>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  props: {
    dropData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeCommand: this.dropData.dropArr
        ? this.dropData.dropArr[0].key
        : "projectId",
    };
  },
  created() {},
  methods: {
    handleCommand(val, item) {
      this.activeCommand = val;
      item.click && item.click(val);
    },
  },
};
</script>

<style lang="less" scoped>
.m-r-5 {
  margin-right: 10px;
}
</style>
